<div bsModal #phoneNumberModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="phoneNumberModal"
  aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">

    <div #modalContent class="modal-content">

      <form *ngIf="active" #phoneNumberForm="ngForm" id="frm_phone_number" novalidate (ngSubmit)="save()">

        <div class="modal-header">
          <button type="button" class="close" (click)="close()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">
            <span>{{l("AddPhoneNumber")}}</span>
          </h4>
        </div>
        <div class="modal-body">
          <div class="row clearfix">
            <div class="col-sm-4">
              <div class="form-group form-float">
                <div class="form-line">
                  <label for="phoneNumberType" class="form-label">{{l("PhoneNumberType")}}</label>
                  <select id="phoneNumberType" name="phoneNumberType" [(ngModel)]="phoneNumber.type" required class="form-control selectpicker">
                    <option value="1">{{l("Mobile")}}</option>
                    <option value="2">{{l("Home")}}</option>
                    <option value="3">{{l("Company")}}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-sm-8">
              <div class="form-group form-float">
                <div class="form-line">
                  <input id="Number" type="text" name="Number" [(ngModel)]="phoneNumber.number" required maxlength="12" minlength="8" class="validate form-control">
                  <label for="Number" class="form-label">{{l("PhoneNumber")}}</label>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
            {{l("Cancel")}}
          </button>
          <button [disabled]="!phoneNumberForm.form.valid || saving" type="submit" class="btn btn-primary waves-effect">
            {{l("Save")}}
          </button>
        </div>

      </form>
    </div>
  </div>
</div>